<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>   
    <title>PWI Demo 5 - Picassa Webalbum Integrator (PWI)</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

    <link   href="js/jquery.fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery.fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>

    <link   href="js/jquery.slimbox2/jquery.slimbox2.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery.slimbox2/jquery.slimbox2.js" type="text/javascript"></script>

    <link   href="js/jquery.colorbox/colorbox.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery.colorbox/jquery.colorbox-min.js" type="text/javascript"></script>
    
    <script src="js/jquery.blockUI.js" type="text/javascript"></script>

    <link   href="css/pwi.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery.pwi.js" type="text/javascript"></script>

    <script type="text/javascript">
      var $viewerSelected = "fancybox";
      var $url=document.URL.split("?", 2);
      if ($url.length == 2) {
        var $queryParams = $url[1].split("&");
        for ($queryParam in $queryParams) {
          var $split = $queryParams[$queryParam].split("=", 2);
          if ($split[0] === "viewer") {
            $viewerSelected = $split[1];
          }
        }
      }
      var $viewerShow;
      var $viewerJs;
      switch($viewerSelected)
      {
      case "fancybox":
        $viewerCss = "js/jquery.fancybox/jquery.fancybox.css";
        $viewerJs  = "js/jquery.fancybox/jquery.fancybox.pack.js";
        break;
      case "slimbox":
        $viewerCss = "js/jquery.slimbox2/jquery.slimbox2.css";
        $viewerJs  = "js/jquery.slimbox2/jquery.slimbox2.js";
        break;
      case "colorbox":
        $viewerCss = "js/jquery.colorbox/colorbox.css";
        $viewerJs  = "js/jquery.colorbox/jquery.colorbox-min.js";
        break;
      default:
        $viewerCss = "unknown";
        $viewerJs  = "unknown";
        break;
      }

      $(document).ready(function () {
        $("#viewername1").text($viewerCss);
        $("#viewername2").text($viewerJs);
        $("a#inline").fancybox({closeClick: false});

        $("#container1").pwi({
          username: 'jdiderik',
          albumsPerPage: 4,
          popupPlugin: $viewerSelected,
          onclickAlbumThumb: function (e) {
            //console.log(e); //use with Firefox and Firebug to see what is returned
            $("#container2").html("");
            $("#container2").pwi({
              username: 'jdiderik',
              maxResults: 25,
              showAlbumDescription: false,
              mode: 'album',
              showSlideshow: false,
              popupPlugin: $viewerSelected,
              album: e.data.gphoto$name.$t  // The ident of the selected album
            });
          }
        });
      });

    </script>
  </head>
  <body style="font-family:arial">
    <h3><a href="index.html">PWI</a> Demo 5, Override the onclickAlbumThumb, show dual-screen: albums and selected album</h3>
    <form name="selector">
      Select popup-viewer: 
      <select name="viewerSelect" onChange="location=document.selector.viewerSelect.options[document.selector.viewerSelect.selectedIndex].value;">
        <option selected disabled="disabled">Select viewer</option>
        <option value="?viewer=fancybox">FancyBox</option>
        <option value="?viewer=colorbox">ColorBox</option>
        <option value="?viewer=slimbox">SlimBox2</option>
      </select>
    </form>
    <br />
    <hr />
    <table align="center" cellspacing=5" width="90%" >
      <tr>
        <td align="center" valign="top" width="50%" style="border-style: double; border-width: 3" bordercolor="#663300">
          <h2><center>Albums:</center></h2>
          <div id="container1"> </div>
        </td>
        <td width="10">
        </td>
        <td align="center" valign="top" width="50%" style="border-style: double; border-width: 3" bordercolor="#663300">
          <h2><center>Content:</center></h2>
          <div id="container2"> </div>
        </td>
      </tr>
    </table>

    Click <a id="inline" href="#data">here</a> to view the code for this example.
    <div style="display:none">
      <div id="data">
        <pre>
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
    &lt;title&gt;PWI Demo 5 - Picassa Webalbum Integrator (PWI)&lt;/title&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"&gt;&lt;/script&gt;

    &lt;link   href="<span id="viewername1"></span>" rel="stylesheet" type="text/css"/&gt;
    &lt;script src="<span id="viewername2"></span>" type="text/javascript"&gt;&lt;/script&gt;

    &lt;link   href="css/pwi.css" rel="stylesheet" type="text/css"/&gt;
    &lt;script src="js/jquery.pwi.js" type="text/javascript"&gt;&lt;/script&gt;

    &lt;script type="text/javascript"&gt;

      $(document).ready(function () {
        var settings = {
          username: '&lt;&lt;USERNAME&gt;&gt;',
          albumsPerPage: 4,
          onclickAlbumThumb: function (e) {
            $("#container2").html("");
            $("#container2").pwi({
              username: '&lt;&lt;USERNAME&gt;&gt;',
              maxResults: 25,
              showAlbumDescription: false,
              mode: 'album',
              showSlideshow: false,
              album: e.data.gphoto$name.$t  // The ident of the selected album
            });
          }
        };
        $("#container1").pwi(settings);
      });

    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="container"&gt; &lt;/div&gt;

    &lt;table align="center" cellspacing=5" width="90%" &gt;
      &lt;tr&gt;
        &lt;td align="center" valign="top" width="50%" style="border-style: double; border-width: 3" bordercolor="#663300"&gt;
          &lt;h2&gt;&lt;center&gt;Albums:&lt;/center&gt;&lt;/h2&gt;
          &lt;div id="container1"&gt; &lt;/div&gt;
        &lt;/td&gt;
        &lt;td width="10"&gt;
        &lt;/td&gt;
        &lt;td align="center" valign="top" width="50%" style="border-style: double; border-width: 3" bordercolor="#663300"&gt;
          &lt;h2&gt;&lt;center&gt;Content:&lt;/center&gt;&lt;/h2&gt;
          &lt;div id="container2"&gt; &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;

  &lt;/body&gt;
&lt;/html&gt;
        </pre>
      </div>
    </div>

  </body>
</html>
